<html>

<head>
    <title>电能质量</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">


    <style>
    </style>

</head>

<body>
    <div class="page" id="page-vue">

        <div class="page-title">电能质量</div>
        <div class="page-main">
            <el-row>
                <el-col :span="4">
                    <dev-tree v-on:click-node="onClickNode" :tabsign="'d'" :zonetype="3" ></dev-tree>
                </el-col>
                <el-col :span="20">
                    <div class="page-head">
                        <el-form :inline="true" style="margin-bottom: 0px;" size="small">
                            <el-form-item label="">
                                <el-date-picker type="date" v-model="beginTime"  value-format="yyyy-MM-dd" placeholder="起始" style="width: 150px;"></el-date-picker>

                                <!--
                                -
                                <el-date-picker type="date" v-model="endTime" placeholder="截止" style="width: 150px;"></el-date-picker>
                                -->
                            </el-form-item>

                            <el-form-item>
                                <el-tooltip effect="dark" content="请点击左边树中设备" v-model="tooltip" placement="right">
                                    <el-button type="primary" @click="search">查询</el-button>
                                </el-tooltip>
                            </el-form-item>
                        </el-form>


                    </div>
                    <el-tabs class="el-tabs_line" v-model="tabName" @tab-click="onTabClick">
                        <el-tab-pane label="谐波" name="tabWave">
                        </el-tab-pane>
                        <el-tab-pane label="功率因数" name="tabP">
                        </el-tab-pane>
                        <el-tab-pane label="三相不平衡度" name="tabAbc">
                        </el-tab-pane>

                        <div class="chart-outer">
                            <chart-bar v-bind:data="eleChartOption"></chart-bar>
                        </div>

                        <el-table :data="tableLine" border stripe size="mini" style="width: 100%;">
                            <el-table-column prop="name" label="采集因子">
                            </el-table-column>
                            <el-table-column prop="maxValue" label="最大值">
                            </el-table-column>
                            <el-table-column prop="maxTime" label="最大时间">
                            </el-table-column>
                            <el-table-column prop="minValue" label="最小值">
                            </el-table-column>
                            <el-table-column prop="minTime" label="最小时间">
                            </el-table-column>
                            <el-table-column prop="avgValue" label="平均值">
                            </el-table-column>
                        </el-table>
                    </el-tabs>

                </el-col>
            </el-row>

        </div>



    </div>

    <script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
    <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>


    <script>

        var vuePage = new Vue({
            el: '#page-vue',
            data: {
                tooltip:false,
                beginTime:'',
                tabName: 'tabWave',
                tableLine: [],
                orginData:[],
                currDeviceId:'',
                eleChartOption:null
            },
            methods: {
                search: function () {
                    this.loadEnergyParam();
                },

                onClickNode(data) {
                    if(data.id.substr(0,1)!="D") return;
                    this.currDeviceId = data.attributes.deviceId;
                    this.loadEnergyParam();
                },


                onTabClick(tab, event) {
                    this.tabName = tab.name;
                    this.refreshChart();
                },

                loadEnergyParam:function(){
                    var _self = this;
                    var dArr = this.beginTime.split('-');
                    var param={
                        zoneIds:[this.currDeviceId].join(','),
                        zoneType:3,
                        energyType:'Electric',
                        year:dArr[0]||0,
                        month:dArr[1]||0,
                        day:dArr[2]||0,
                        sumType:0,
                    };
                    HttpUtil.get('Analysis/getEnergyParam', param)
                    .success(function(data){
                        console.log('getEnergyParam',data);
                        _self.orginData = data;
                        _self.refreshChart();

                    });
                },

                refreshChart:function(){
                    var xdata=[];
                    var ydata=[];
                    var tableData=[];
                    var datas = this.orginData.data;
                    if(this.tabName == "tabWave"){
                        ydata=[
                            {name:'IA谐波',value:[]},
                            {name:'IB谐波',value:[]},
                            {name:'IC谐波',value:[]},
                        ]
                    }else if(this.tabName == "tabP"){
                        ydata=[
                            {name:'总功率因数',value:[]},
                            {name:'A相功率因数',value:[]},
                            {name:'B相功率因数',value:[]},
                            {name:'C相功率因数',value:[]},
                        ]
                    }else if(this.tabName == "tabAbc"){
                        ydata=[
                            {name:'电流不平衡',value:[]}
                        ]
                    }


                    for(var i=0;i<datas.length;i++){
                        xdata.push(datas[i].attributes.dd_hour);

                        if(this.tabName == "tabWave"){
                            ydata[0].value.push(datas[i].field35);
                            ydata[1].value.push(datas[i].field36);
                            ydata[2].value.push(datas[i].field37);
                        }else if(this.tabName == "tabP"){
                            ydata[0].value.push(datas[i].field19);
                            ydata[1].value.push(datas[i].field26);
                            ydata[2].value.push(datas[i].field27);
                            ydata[3].value.push(datas[i].field28);
                        }else if(this.tabName == "tabAbc"){
                            ydata[0].value.push(datas[i].field39);
                        }
                    }

                    this.eleChartOption={
                        title:'',
                        x:xdata,
                        y:ydata
                    };

                    console.log('eleChartOption',this.eleChartOption);

                    if(this.tabName == "tabWave" || this.tabName == "tabP" || this.tabName=="tabAbc"){

                        for(var i=0;i<ydata.length;i++){
                            var min,max,mint,maxt;
                            var sum=0;
                            var values = ydata[i].value;
                            for(var j=0;j<values.length;j++){
                                if(j==0){
                                    min = max = values[j];
                                    mint = maxt = xdata[j];
                                }else{
                                    if(values[j]<min){
                                        min = values[j];
                                        mint = xdata[j]
                                    }
                                    if(values[j]>max){
                                        max = values[j];
                                        maxt = xdata[j]
                                    }
                                }
                                sum+=values[j];
                            }

                            tableData.push({
                                name:ydata[i].name,
                                maxValue:max,
                                minValue:min,
                                maxTime:maxt,
                                minTime:mint,
                                avgValue: (sum/xdata.length).toFixed(2)
                            });
                        }

                    }

                    this.tableLine = tableData;


                }
            },
            created: function () {

                this.beginTime = TimeUtil.convertToString(new Date()).substr(0, 10);

            },
            mounted: function () {
                this.tooltip = true;
            }
        });


    </script>
</body>

</html>
